<template>
  <CustomScrollbar class="categories-scroll">
    <div class="categories">
    <div class="categories-header">
      <h1 class="page-title">浏览分类</h1>
      <p class="page-desc">发现你喜欢的音乐类型</p>
    </div>
    
    <div class="categories-grid">
      <div 
        v-for="category in categories" 
        :key="category.id"
        class="category-card"
        :style="{ background: category.gradient }"
        @click="goToCategory(category)"
      >
        <div class="category-content">
          <h3 class="category-name">{{ category.name }}</h3>
          <p class="category-desc">{{ category.description }}</p>
          <div class="category-icon">{{ category.icon }}</div>
        </div>
        <div class="category-overlay"></div>
      </div>
    </div>
    </div>
  </CustomScrollbar>
</template>

<script>
import CustomScrollbar from '@/components/CustomScrollbar.vue'
import { categoryAPI } from '@/utils/api'

export default {
  components: {
    CustomScrollbar
  },
  name: 'CategoriesView',
  data() {
    return {
      categories: [],
      loading: false
    }
  },
  
  async mounted() {
    await this.loadCategories()
  },
  
  methods: {
    async loadCategories() {
      this.loading = true
      try {
        const response = await categoryAPI.getAllCategories()
        if (response.success && response.categories) {
          this.categories = response.categories
            .filter(cat => cat.status === 1) // 只显示启用的分类
            .map(cat => ({
              id: cat.categoryId,
              name: cat.name,
              description: cat.description || `探索 ${cat.name} 音乐`,
              icon: cat.icon || '🎵',
              gradient: cat.gradient || `linear-gradient(135deg, ${cat.color || '#1DB954'}, ${this.lightenColor(cat.color || '#1DB954')})`,
              color: cat.color || '#1DB954'
            }))
        } else {
          // 如果加载失败，使用默认分类
          this.categories = [
            {
              id: 1,
              name: '流行',
              description: '最受欢迎的流行音乐',
              icon: '🎵',
              gradient: 'linear-gradient(135deg, #1DB954, #1ed760)',
              color: '#1DB954'
            },
        {
          id: 2,
          name: '摇滚',
          description: '激情澎湃的摇滚乐',
          icon: '🎸',
          gradient: 'linear-gradient(135deg, #E22134, #ff4757)',
          color: '#E22134'
        },
        {
          id: 3,
          name: '古典',
          description: '优雅的古典音乐',
          icon: '🎼',
          gradient: 'linear-gradient(135deg, #8056d3, #9980fa)',
          color: '#8056d3'
        },
        {
          id: 4,
          name: '爵士',
          description: '经典的爵士风格',
          icon: '🎷',
          gradient: 'linear-gradient(135deg, #ba5d07, #fa8c1a)',
          color: '#ba5d07'
        },
        {
          id: 5,
          name: '民谣',
          description: '温暖的民谣音乐',
          icon: '🌾',
          gradient: 'linear-gradient(135deg, #27856a, #2ed573)',
          color: '#27856a'
        },
        {
          id: 6,
          name: '电子',
          description: '现代电子音乐',
          icon: '⚡',
          gradient: 'linear-gradient(135deg, #2d46b9, #3742fa)',
          color: '#2d46b9'
        },
        {
          id: 7,
          name: '说唱',
          description: '节奏感强的说唱音乐',
          icon: '🎤',
          gradient: 'linear-gradient(135deg, #e8115b, #ff3838)',
          color: '#e8115b'
        },
        {
          id: 8,
          name: '轻音乐',
          description: '放松的轻音乐',
          icon: '🎹',
          gradient: 'linear-gradient(135deg, #608108, #7bed9f)',
          color: '#608108'
        },
        {
          id: 9,
          name: '乡村',
          description: '美式乡村音乐',
          icon: '🤠',
          gradient: 'linear-gradient(135deg, #d63031, #e17055)',
          color: '#d63031'
        },
        {
          id: 10,
          name: 'R&B',
          description: '节奏布鲁斯音乐',
          icon: '💫',
          gradient: 'linear-gradient(135deg, #6c5ce7, #a29bfe)',
          color: '#6c5ce7'
        },
        {
          id: 11,
          name: '金属',
          description: '重金属摇滚',
          icon: '⚔️',
          gradient: 'linear-gradient(135deg, #2d3436, #636e72)',
          color: '#2d3436'
        },
        {
          id: 12,
          name: '蓝调',
          description: '经典蓝调音乐',
          icon: '🎺',
          gradient: 'linear-gradient(135deg, #0984e3, #74b9ff)',
          color: '#0984e3'
        }
          ]
        }
      } catch (error) {
        console.error('加载分类失败:', error)
        this.$toast?.error('加载分类失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },
    
    // 辅助方法：让颜色变亮
    lightenColor(color) {
      // 简单的颜色变亮算法
      const hex = color.replace('#', '')
      const r = Math.min(255, parseInt(hex.substr(0, 2), 16) + 30)
      const g = Math.min(255, parseInt(hex.substr(2, 2), 16) + 30)
      const b = Math.min(255, parseInt(hex.substr(4, 2), 16) + 30)
      return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
    },
    
    goToCategory(category) {
      this.$router.push(`/category/${category.id}`)
    }
  }
}
</script>

<style scoped>
.categories-scroll {
  height: 100%;
}

.categories {
  padding-bottom: 24px; /* 确保底部有适当的间距 */
}

.categories-header {
  margin-bottom: 48px;
}

.page-title {
  font-size: 3rem;
  font-weight: bold;
  color: white;
  margin-bottom: 16px;
}

.page-desc {
  font-size: 1.2rem;
  color: #b3b3b3;
  margin: 0;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.category-card {
  position: relative;
  aspect-ratio: 2/1;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.category-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}

.category-name {
  font-size: 2rem;
  font-weight: bold;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.category-desc {
  font-size: 1rem;
  opacity: 0.9;
  margin: 0;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.category-icon {
  position: absolute;
  bottom: 24px;
  right: 24px;
  font-size: 3rem;
  opacity: 0.8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.category-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 1;
}

/* 悬停动画效果 */
.category-card:hover .category-icon {
  transform: scale(1.1) rotate(5deg);
  transition: transform 0.3s ease;
}

.category-card:hover .category-name {
  transform: translateY(-2px);
  transition: transform 0.3s ease;
}

@media (max-width: 768px) {
  .categories {
    padding: 16px;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
  }
  
  .category-card {
    aspect-ratio: 1.5/1;
  }
  
  .category-content {
    padding: 16px;
  }
  
  .category-name {
    font-size: 1.5rem;
  }
  
  .category-icon {
    font-size: 2rem;
    bottom: 16px;
    right: 16px;
  }
}

@media (max-width: 480px) {
  .categories-grid {
    grid-template-columns: 1fr;
  }
  
  .category-card {
    aspect-ratio: 2/1;
  }
}
</style> 